{extend name="common/base"/}
{block name="style"}
<style>
	.layui-tree-entry{font-size:15px; line-height:24px}
	.layui-tree-set{padding:2px 0}
	.layui-tree-iconClick .layui-icon{color:#1E9FFF}
	.layui-icon layui-icon-file{font-size:16px;}
	.layui-tree-icon {height: 14px;line-height: 14px; width: 14px; text-align: center;border: 1px solid #1E9FFF; color:#1E9FFF}
	.layui-tree-line .layui-tree-set .layui-tree-set:after{top:18px;}
	.tree-left{width:260px; float:left; height:calc(100% - 30px); overflow: scroll; border:1px solid #eeeeee; background-color:#FAFAFA; padding:12px 12px 12px 5px;}
	.tree-left h3{font-size:16px; height:30px; padding-left:10px; font-weight:800}

	.gougu-upload-files{background-color: #ffffff; border:1px solid #e4e7ed;color: #c0c4cc;cursor: not-allowed; padding:0 12px; width:180px; box-sizing: border-box; display: inline-block; font-size: inherit; height: 38px; line-height: 35px; margin-right:8px; border-radius:2px;}
	.gougu-upload-tips{color:#969696}
	.layui-form-item{margin-bottom:8px;}
	.layui-input-block{min-height:24px;}
	.layui-table-view {
		clear: none;
	}
</style>
{/block}
<!-- 主体 -->
{block name="body"}

<div class="p-3">
	<div class="tree-left">
		<h3>所属区划</h3>
		<div id="depament"></div>
	</div>
	<div style="margin-left:280px;">
		<form class="layui-form gg-form-bar border-x border-t" lay-filter="barsearchform">
			<div class="layui-input-inline"><h3 id="area_name">{$area_name}</h3></div>
			<div class="layui-input-inline" style="width:260px;">
				<select name="unit_id" id="unit_id" lay-filter="unit_id" lay-search>
					<option value="">所属机构</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width:300px;">
				<input type="text" name="keywords" placeholder="ID/事项名称/基本编码/关键字检索" class="layui-input" autocomplete="off" />
			</div>
			<div class="layui-input-inline" style="width:150px;">
				<select name="event_status" id="event_status" lay-filter="event_status" lay-search>
					<option value="">状态</option>
					<option value="1">发布</option>
					<option value="2">暂停</option>
				</select>
			</div>
			<input type="hidden" name="area_id" id="area_id" value="{$area_id}">
			<div class="layui-input-inline">
				<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">提交搜索</button>
				<button type="reset" class="layui-btn layui-btn-reset" lay-filter="clear">清空</button>
			</div>
		</form>
		<table class="layui-hide" id="test" lay-filter="test"></table>
	</div>
</div>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm add-menu">+ 添加事项</button>
		<button class="layui-btn layui-btn-sm ownadd">+ 自建事项</button>
	</div>
</script>

{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	const moduleInit = ['tool', 'treeGrid'];
	function gouguInit() {
		var treeGrid = layui.treeGrid,table = layui.table, tool = layui.tool, form = layui.form,tree = layui.tree;
		let area_id = $('#area_id').val();
		//区划列表
		$.ajax({
			url: "/matter/area/get_area_tree",
			type:'get',
			success:function(res){
				//仅节点左侧图标控制收缩
				tree.render({
					elem: '#depament',
					data: res.trees,
					onlyIconControl: true,  //是否仅允许节点左侧图标控制展开收缩
					click: function(obj){
						//layer.msg(JSON.stringify(obj.data));
						getUnit(obj.data.id)
						$('#area_name').text(obj.data.name)
						$('#area_id').val(obj.data.id)
						layui.pageTable.reload({
							where: {area_id: obj.data.id}
							,page:{curr:1}
						});
						$('[name="keywords"]').val('');
						$('[name="status"]').val('');
						$('[name="type"]').val('');
						layui.form.render('select');
					}
				});
			}
		})


		//事项列表
		layui.pageTable = table.render({
			elem: '#test',
			title: '数据列表',
			toolbar: '#toolbarDemo'
			, url: "/matter/matter/index"
			, cellMinWidth: 80
			, page: true//开启分页
			,limit: 16
			,where: {area_id: area_id}
			, cols: [[
				 { field: 'id', width: 100, title: 'ID号', align: 'center' }
				, { field: 'directory_name', title: '上级目录', templet: function (d) {
						let str = '';
						if(d.directory){
							str += d.directory.name;
						}
						return str;
					}}
				, { field: 'name', title: '事项名称'}
				, { field: 'unit_name', title: '实施主体',width: 240, align: 'center', templet: function (d) {
						let str = '';
						if(d.unit){
							str += d.unit.name;
						}
					return str;
				} }
				, { field: 'implement_code', title: '实施编码',width: 300, align: 'center'}
				, { field: 'event_status', title: '事项状态',width: 40, align: 'center', templet: function (d) {
					if(d.event_status == 1){
						return '<span class="layui-badge layui-bg-green">发布</span>';
					}else{
						return '<span class="layui-badge">暂停</span>';
					}
				} }
				, { width:150, title: '操作', align: 'center', templet: function (d) {

						let btn = '<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</button>';
						if(d.is_own == 1){
							//自建事项
							btn = '<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="own-edit">编辑</button>';
						}

						var html = '<span class="layui-btn-group">'+btn+'<button class="layui-btn layui-btn-xs" lay-event="matter_case">情形</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></span>';
						return html;

					}
				}
			]]
		});
		
		//表头工具栏事件
		$('body').on('click','.add-menu', function(){
			tool.side("/matter/matter/add");
			return;
		});

		//自建事项
		$('body').on('click','.ownadd', function(){
			tool.side("/matter/matter/ownadd");
			return;
		});


		//操作按钮
		table.on('tool(test)', function (obj) {
			//情形
			if (obj.event === 'matter_case') {
				tool.side("/matter/matter_case/index?matter_id="+obj.data.id);
				return;
			}
			if (obj.event === 'add') {
				tool.side("/matter/matter/add?pid="+obj.data.id);
				return;
			}
			if (obj.event === 'edit') {
				tool.side("/matter/matter/add?id="+obj.data.id);
				return;
			}
			if (obj.event === 'own-edit') {
				tool.side("/matter/matter/ownadd?id="+obj.data.id);
				return;
			}
			if (obj.event === 'del') {
				layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("/matter/matter/delete", { id: obj.data.id }, callback);
					layer.close(index);
				});
			}
		});

		//监听搜索提交
		form.on('submit(webform)', function (data) {
			layui.pageTable.reload({
				where: {
					keywords: data.field.keywords,
					unit_id: data.field.unit_id,
					area_id:data.field.area_id,
					event_status:data.field.event_status,
				},
				page: {
					curr: 1
				}
			});
			return false;
		});
		$('[lay-filter="clear"]').on('click',function(){
			setTimeout(function(){
				$('[lay-filter="webform"]').click();
			},10)
		})


		// //省
		// form.on('select(province)',function (data) {
		// 	area_below($("#city"),data.value);
		// 	$("#county").html('');
		// 	$("#streets").html('');
		// 	$("#village").html('');
		// })
		// //市
		// form.on('select(city)',function (data) {
		// 	area_below($("#county"),data.value);
		// 	$("#streets").html('');
		// 	$("#village").html('');
		// })
		// //县
		// form.on('select(county)',function (data) {
		// 	area_below($("#streets"),data.value);
		// 	$("#village").html('');
		// })
		// //街道
		// form.on('select(streets)',function (data) {
		// 	area_below($("#village"),data.value);
		// })
		// //村居
		// form.on('select(village)',function (data) {
		// 	area_below('',data.value);
		// })
		//
		// //获取下级地区
		// function area_below(obj,pid=0){
		// 	getUnit(pid)
		// 	$.ajax({
		// 		type:"get",
		// 		url:"/matter/matter/getAreaBelow?id="+pid,
		// 		dataType:"json",
		// 		success:function (d) {
		// 			if(d.length>0) {
		// 				//对应的值传回，拼出html下拉框语句
		// 				var tmp = '<option value="">请选择</option>';
		// 				for (var i in d) {
		// 					tmp += '<option value="' + d[i].id + '">' + d[i].name + '</option>';
		// 				}
		// 				obj.html(tmp);
		// 				form.render();
		// 			}
		// 		},error:function () {
		// 			layer.alert('请求失败');
		// 		}
		// 	});
		// }

		getUnit(area_id)
		//获取部门
		function getUnit(id){
			$.ajax({
				type:"get",
				url:"/matter/matter/getUnit?id="+id,
				dataType:"json",
				success:function (d) {
					//对应的值传回，拼出html下拉框语句
					var tmp='<option value="">所属机构，输入关键字检索</option>';
					for (var i in d){
						tmp +='<option value="'+d[i].id+'">'+d[i].name+'</option>';
					}
					$("#unit_id").html(tmp);
					form.render();

				},error:function () {
					layer.alert('请求失败');
				}
			});
		}

	}
</script>
{/block}
<!-- /脚本 -->